html, body {
  background: #f5f5f5;
  height: 100%;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
}

body {
  -webkit-text-size-adjust: 100% !important;
}

.page {
  height: 100%;
  position: relative;
  font-size: 0.28rem;
}

#core {
  position: absolute;
  width: 100%;
  top: 20%;
  z-index: 1;
}

#logo {
  width: 100%;
  text-align: center;
  margin-bottom: 1.2rem;
}

#logo img {
  width: 3rem;
}

.search_box {
  padding: 0 0.05rem;
  position: relative;
  width: 6rem;
  margin: 0 auto;
}

#result_page .search_box {
  display: -moz-box;
  display: -webkit-box;
  display: flex;
  width: 6rem;
  background: #fff;
  padding: 0.1rem 0.2rem;
}

.query {
  border: solid 1px #c9c9c9;
  padding: 0 1.3rem 0 0.2rem;
  height: 0.65rem;
  width: 100%;
  font-size: 0.3rem;
  border-radius: 0.15rem;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: none;
}

#result_page .query {
  flex-grow: 1;

  width: 3rem;
  margin-right: 0.2rem;
  background: #e4e4e4;
  padding-right: 0.7rem;
}

.reset_btn {
  display: none;
  outline: none;

  height: 0.65rem;
  width: 0.6rem;
  position: absolute;
  top: 0;
  right: 1.1rem;

  background: url(../imgs/reset_gray.png) no-repeat center;
}

#result_page .reset_btn {
  top: 0.1rem;
  right: 1.45rem;
  background-image: url(../imgs/reset_black.png);
}

.search_btn {
  position: absolute;
  top: 0;
  right: 0.05rem;
  height: 0.65rem;
  width: 1.0rem;
  padding: 0;
  border: solid 1px #cc2c1f;
  border-radius: 0 0.12rem 0.12rem 0;
  background: url(../imgs/search_btn.png) no-repeat center;
  background-color: #cc2c1f;
  outline: none;
}

#result_page .search_btn {
  position: relative;
  right: auto;
  border-radius: 0.15rem;
}

#footer {
  width: 100%;
  position: absolute;
  bottom: 0;
}

#result_page {
  display: none;
  width: 6.4rem;
  margin: 0 auto;
}

#result > p {
  margin: 0;
  height: 0.4rem;
  padding: 0.1rem;
  border-top: solid 1px #e4e4e4;
  color: #ababab;
}

#result > ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.32rem;
  background-color: #fff;
  border-top: solid 1px #e4e4e4;
}

#result li {
  padding: 0.15rem 0.25rem;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border-bottom: solid 1px #e4e4e4;
}

#result li > span {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.novel_name {
  width: 4.3rem;
}

.author {
  padding-left: 0.1rem;
  color: #767676;
  width: 1.5rem;
  text-align: right;
}

.list_more {
  display: none;
  color: #fff;
  margin: 0.2rem auto;
  width: 2rem;
  height: 0.6rem;
  line-height: 0.6rem;
  border-radius: 0.15rem;
  text-align: center;
  background-color: #6080c0;
}

#empty {
  text-align: center;
}

#empty > p {
  text-align: left;
  color: #728bb2;
  margin: 0.4rem 0px 1rem 0.2rem;
}

#empty img {
  width: 1.6rem;
}

#empty > div > p {
  margin: 0.4rem 0.6rem 0;
  color: #949494;
}

@media (min-width: 750px) and (min-height: 750px) {
  .search_btn {
    background-image: url(../imgs/search_btn2x.png);
  }

  .reset_btn {
    background-image: url(../imgs/rest_btn_gray2x.png);
  }

  #result_page .reset_btn {
    background-image: url(../imgs/reset_btn_black2x.png);
  }
}
